<template>
    <div class="hot">
        <Titles :titleInfo="titleInfo" />
        <div class="hot-list">
            <div class="hot-cont" v-for="(item,index) in hotList" :key="index">
                <a href="javascript">
                    <div class="cover">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="intro">
                        <h4 class="intro-title">{{ item.title }}</h4>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import Titles from '@/components/title'
export default {
    components: {
        Titles
    },
    data() {
        return {
            hotList: [],
            titleInfo: {
                titles: '今日热播',
                sign: 'linear-gradient(45deg, rgba(255,139,139,0.00) 0%, rgba(255,183,98,0.70) 38%, #FFA100 100%)',
                week: '',
                more: {
                    moreTit: '换一换',
                    show: true
                }
            },
        }
    },
    mounted() {
        this.getList()
        this.getWeekDate()
    },
    methods: {
        getList() {
            this.$http.get({
                url:'video/hot',
                data: {
                    size: 4,
                    page: 1
                }
            }).then((res) => {
                this.hotList = res.data
            })
        },
        getWeekDate() {
            var now = new Date();
            var day = now.getDay();
            var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            this.titleInfo.Time = weeks[day];
            return this.titleInfo.Time;
        }
    }
}
</script>

<style>
.hot-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 0.36rem;
}
.hot-list .hot-cont a {
    width: 3.27rem;
    padding-bottom: 0.48rem;
}
.hot-list .hot-cont a .cover {
    width: 3.27rem;
    height: 1.83rem;
}
.hot-list .hot-cont a .cover img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.hot-list .hot-cont a .intro {
    margin-top: 0.2rem;
}
.hot-list .hot-cont a .intro h4 {
    font-size: 0.32rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height: 0.45rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
</style>
